<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div{
            width: 100px;
            height: 100px;
            display: block;
            border: 2px solid #ff2424;
            margin: 10px;
            padding: 7px;
        }
    </style>
</head>
<body>
<h2>display: 设置元素的显示类型，block块级，inline行级</h2>
    <p>块级元素改变元素的高度<br>
    行级元素的高度不可改变,就是内容的高度<br>
    行内块元素：改变元素的高宽，位于一行之中
    block 块级  inline 行级  inline-block 行内块  none 隐藏元素<br>
    visibility:hidden
    </p>
    <div>
        <div class="div" style="display: inline">DIV(块级)</div>
        <span class="div" style="display: block">SPAN(行级)</span>
        <span class="div" style="visibility: hidden">SPAN(行级)</span>
        <label class="div" style="display: inline-block">LABEL(行级)</label>

        <span class="div" style="display: block">SPAN(行级)</span>
    </div>
</body>
</html>
